<!-- Sidebar.vue -->
<template>
  <div class="sidebar">
    <!-- Add sidebar icons here -->
    <div class="box">
      <div class="icon" v-for="icon in icons" >
        <!-- <div v-if=" icon.id=== 2">
          <h2>一</h2>
        </div> -->
        <RouterLink :to="`${icon.path}`">
          <img :src="icon.p" alt="" />
        </RouterLink>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts" name="SideBar">
import icon4 from '@/assets/svg/sidebar/help.svg';
import icon5 from '@/assets/svg/sidebar/ri_logout-circle-line.svg';
import icon3 from '@/assets/svg/sidebar/settings.svg';
import icon1 from '@/assets/svg/sidebar/simple-icons_apacheecharts.svg';
import icon2 from '@/assets/svg/sidebar/container.svg';

const icons = [
  {p:icon1,path:'/student'},
  {p:icon2,path:'/chat'},
  {p:icon3,path:'/student'},
  {p:icon4,path:'/student'},
  {p:icon5,path:'/'},
]


</script>

<style scoped>
.box{
  margin: auto;
  /* height: 100%; */
}
.sidebar {
  display: flex;
  flex-direction: column;
  background-color: #41A2FF;
  width: 60px;
  align-items: center;
  padding: 0 0 40px 0;
  /* padding-top: 20px; */
}

.icon {

  margin-bottom: 20px;
}

.icon img {
  &:hover {
    width: 30px;
    height: 30px;
  }

  width: 20px;
  height: 20px;
}
</style>
